<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS立方体</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            background: var(--bg);
        }
        
         :root {
            --bg: rgb(254, 251, 249);
            --maincube: 400px;
            --smallcube: 200px;
            --smallercube: 100px;
        }
        
        #main-wrapper {
            position: relative;
            margin: 9em auto;
            width: var(--maincube);
            height: var(--maincube);
            perspective: 1000px;
        }
        
        .cube {
            position: absolute;
            top: calc(50% - var(--cubesize) / 2);
            right: calc(50% - var(--cubesize) / 2);
            width: var(--cubesize);
            height: var(--cubesize);
            transform-style: preserve-3d;
            transform: translateZ(calc(-1 * var(--cubesize) / 2));
            animation: var(--anim) 10s linear infinite alternate;
        }
        
        #smallcube {
            animation: subcuberotation 10s linear infinite alternate-reverse;
        }
        
        .cube .front {
            background: rgba(66, 153, 205, .8) !important;
        }
        
        .cube>div:not(.cube) {
            position: absolute;
            background: rgba(241, 248, 244, 0.49);
            width: var(--cubesize);
            height: var(--cubesize);
            border: 1px solid rgb(66, 153, 205);
        }
        
        .cube>.front {
            transform: rotateY(0deg) translateZ(calc(var(--cubesize) / 2));
        }
        
        .cube>.back {
            transform: rotateX(180deg) translateZ(calc(var(--cubesize) / 2));
        }
        
        .cube>.right {
            transform: rotateY(90deg) translateZ(calc(var(--cubesize) / 2));
        }
        
        .cube>.left {
            transform: rotateY(-90deg) translateZ(calc(var(--cubesize) / 2));
        }
        
        .cube>.top {
            transform: rotateX(90deg) translateZ(calc(var(--cubesize) / 2));
        }
        
        .cube>.bottom {
            transform: rotateX(-90deg) translateZ(calc(var(--cubesize) / 2));
        }
        
        @keyframes maincuberotation {
            0% {
                transform: translateZ(calc(-1 * var(--cubesize) / 2)) rotateY(0deg);
            }
            20% {
                transform: translateZ(calc(-1 * var(--cubesize) / 2)) rotateX(-180deg);
            }
            40% {
                transform: translateZ(calc(-1 * var(--cubesize) / 2)) rotateY(-90deg);
            }
            60% {
                transform: translateZ(calc(-1 * var(--cubesize) / 2)) rotateY(90deg);
            }
            80% {
                transform: translateZ(calc(-1 * var(--cubesize) / 2)) rotateX(-90deg);
            }
            100% {
                transform: translateZ(calc(-1 * var(--cubesize) / 2)) rotateX(90deg);
            }
        }
        
        @keyframes subcuberotation {
            0% {
                transform: rotateY(0deg);
            }
            20% {
                transform: rotateX(-180deg);
            }
            40% {
                transform: rotateY(-90deg);
            }
            60% {
                transform: rotateY(90deg);
            }
            80% {
                transform: rotateX(-90deg);
            }
            100% {
                transform: rotateX(90deg);
            }
        }
    </style>

</head>

<body>

    <div id="main-wrapper">
        <div id="maincube" class="cube" style="--cubesize:400px;--anim:maincuberotation;">
            <div class="front"></div>
            <div class="back"></div>
            <div class="right"></div>
            <div class="left"></div>
            <div class="top"></div>
            <div class="bottom"></div>

            <div id="smallcube" class="cube" style="--cubesize:200px;--anim:subcuberotation;">
                <div class="front"></div>
                <div class="back"></div>
                <div class="right"></div>
                <div class="left"></div>
                <div class="top"></div>
                <div class="bottom"></div>

                <div id="smallercube" class="cube" style="--cubesize:100px;">
                    <div class="front"></div>
                    <div class="back"></div>
                    <div class="right"></div>
                    <div class="left"></div>
                    <div class="top"></div>
                    <div class="bottom"></div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>